﻿@font-face { font-family: 'digital-dream';
	src: url('fonts/digital-dream/DIGITALDREAM.ttf') format('truetype'); }

body
{
	text-align: center;
}

#wrapper
{

	text-align: left;
	width: 916px;
	height: 768px;
	margin: 5px auto;
	border: 1px solid black;
	background-color: darkgray;
}

#cImageBPM
{
	background: url('../images/back_bpm.png') no-repeat center;
	width: 100px;
	height: 80px;
	margin-top: 18px;	
	margin-left: 0px;
	background-size: 100% 100%;
	text-align: center;

}

#cImageSample
{
	background: url('../images/back_sample.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#cImagePitch
{
	background: url('../images/back_pitch.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#cImagePan
{
	background: url('../images/back_pan.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#cImageDTime
{
	background: url('../images/back_dtime.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#cImageDGain
{
	background: url('../images/back_dgain.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#cImageReverb
{
	background: url('../images/back_reverb.png') no-repeat center;
	width: 100px;
	height: 80px;
	padding-top: 0px;	
	padding-left: 0px;
	background-size: 100% 100%;
	text-align: center;
}

#channelknob
{
	padding-left: 15px;
	padding-right: 0px;
	padding-top: 15px;

	width: 80px;
	height: 80px;
	/*border: 1px solid black;*/
	/*background: url('../images/back_pitch.png') no-repeat center;*/
	/*background-size: 60% 100%;*/
	text-align: center;
}

#channel
{

	float: left;
	border-right: 1px solid gray;
	height: 650px;
	width: 100px;
	
}

#channelosc
{

	float: left;

	border: 1px solid gray;
	height: 650px;
	width: 100px;	
}

#channelosc ul
{
	text-align:center;
	margin-top: 10px;
	padding: 0px;
	list-style-type: none;
	height: 420px;
}

#channelosc ul li 
{ 	
	float: left;
	display: inline;
	width: 85px;
	height: 85px;

	/*display: inline;*/
	/*margin-top: 5px;*/
}

#channel ul
{
	text-align:center;
	margin-top: 10px;
	padding: 0px;
	list-style-type: none;
	height: 420px;
}

#channel ul li 
{ 
	float: left;
	display: inline;
	width: 85px;
	height: 85px;

	/*display: inline;*/
	/*margin-top: 5px;*/
}

#masterchannel
{

	float: left;
	border: 0px solid gray;
	height: 650px;
	width: 100px;
	
}

#masterchannel ul
{
	text-align:center;
	margin-top: 10px;
	padding: 0px;
	list-style-type: none;

}

#masterchannel ul li 
{ 
	
	width: 85px;
	/*height: 85px;*/

	/*display: inline;*/
	margin-top: 5px;
}

#channels
{

	/*border: 1px solid black;*/

	
}

#OscEffectWrap
{

	float: left;
	border: 1px solid black;
	width: 400px;

	
}

#mEffects
{
	float: left;
	height: 250px;
	width: 400px;
	/*border: 1px solid black;*/
	
}

#mEffects ul
{
	text-align:center;
	margin: 0;
	padding: 0;
	list-style-type: none;

}

#mEffects ul li 
{ 
	float: left;
	width: 85px;
	height: 85px;

	/*display: inline;*/
	/*margin-top: 5px;*/
}

.oscA
{

	margin-top: 50px;	
}

#osc
{

	float: left;
	border: 1px solid black;
	height: 250px;
	width: 400px;
	
}

#osc ul
{
	text-align:center;
	margin: 0;
	padding: 0;
	list-style-type: none;

}

#osc ul li 
{ 
	float: left;
	width: 85px;
	height: 85px;
	
	/*display: inline;*/
	/*margin-top: 5px;*/
}

#oscbar .barbutton
{

	
	border: 1px solid gray;
	height: 40px;
	width: auto;
	
}

#oscbar .barbutton
{	
	border: 1px solid gray;
	height: 40px;
	width: 40px;
	background-color: lightgray;	
}

#oscbar ul
{
	float: left;
	text-align:center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#oscbar ul li 
{ 	
	/*display: inline;*/
	/*margin-top: 5px;*/
}

.note
{
	font-size:10px;
	width: 40px;

}

.oktave
{
	font-size:10px;
	width: 40px;

}

.laenge
{
	font-size:10px;
	width: 40px;

}

#channelwrapone
{

	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;

}

#channelwrap
{
	width:100px;
	height:200px;

	float: left;
}

.cwButton
{
	width: 15px;
	height: 15px;

	float: left;
}

#cwoneButton
{
	width:60px;
	height:110px;
	position: relative;
	float: left;
}

#slidehandleone
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;

	background: url('../images/faderknob.png') no-repeat center;
}

#channelwraptwo
{
	width: 93px;
	height: 110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandletwo
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapthree
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandlethree
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapfour
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandlefour
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapfive
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandlefive
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapsix
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandlesix
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapseven
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandleseven
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwrapeight
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandleeight
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	
	background: url('../images/faderknob.png') no-repeat center;
}

#channelwraposc
{
	width:93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandleosc
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}


#channelwrapmaster
{

	width: 93px;
	height:110px;
	background: url('../images/fader_bg.png') no-repeat center;
	margin-top: 15px;
	margin-left: 5px;
}

#slidehandlemaster
{	
	background-color: darkgray;

	width: 80px;
	height: 10px;
	top: 25px;
	background: url('../images/faderknob.png') no-repeat center;
}

#sequencerwrap
{
	float: left;
	width: 910px;
	border-top: 1px solid gray;
	height: 105px;
}

.sequencer
{
	float: left;
	width: 807px;
	border-right: 1px solid gray;
	height: 110px;
	
}

.seqcontrol
{
	
	width: 120px;
	/*border: 1px solid gray;*/
	height: 70px;
	margin-top: 13px;
}

#seqrow
{
	padding-top: 12px;
	width: 790px;
	margin: auto;
}


#tr1
{

	width: 890px;
	margin: auto;
	height: 80px;
}

#tr2
{

	width: 780px;
	margin: auto;
	height: 5px;
	visibility:visible;
}


#oseqrow
{
	padding-top: 15px;
	width: 300px;
	margin: auto;
	border: 1px solid gray;
}

#seqrow tr
{

}

#seqrow td
{
	width: 40px;
	height: 10px;
	border: 1px solid gray;
	border-radius: 5px;
	background-color: white;
}

#bCH
{
	width: 93px;
	margin: 15px auto;	
}

.bCH
{
	margin: auto;
	width: 60px;
	border: 1px solid gray;
	height:25px;
	background-color: #e7e7e7;
}

#bMS
{
	width: 93px;
	margin: 15px auto;
}

.bM
{
	background-color: #e7e7e7;
	border: 1px solid gray;
	margin-left: 14px;
	margin-right: 5px;
	width: 30px;
	float: left;
}

.bS
{
	background-color: #e7e7e7;
	border: 1px solid gray;
	width: 30px;

}

.runbutton
{
	left: 6px;
	margin-top: 15px;
	margin-left: 10px;
	width: 80px;
	border: none;
	height: 79px;
	background-color: #e7e7e7;
	border-radius: 5px;

}

#button1
{
	/*bottom: 0;*/
	float: left;
	border-style: none;
	border: 1px solid gray;
}

.cLabelbpm
{
	position: relative;
	height: 48px;
	width: auto;
	text-align: right;
	font-family: digital-dream, Arial, Helvetica, sans-serif;
	font-size: 33px;
	margin-left: 7px;
	margin-top: 2px;
	padding-top: 2px;
	padding-left: 4px;
	padding-right: 2px;
	border-top: solid 1px rgb(41, 41, 41);
	border-left: solid 1px rgb(104, 104, 104);
	border-bottom: solid 1px rgb(41, 41, 41);
	border-right: solid 1px rgb(104, 104, 104);
	
	color: rgb(209, 0, 0);
	background-color: rgb(56, 56, 56);
	vertical-align: middle;
	display: table-cell;
	
}

.cDigiWrap
{   
	margin-top: 26px;
	margin-left: 7px;
}

.cdigibpm
{
	margin-top: 5px;

}

.cText
{	
	padding-top: 15px;
	padding-left: 10px;
	width: 80px;
	height: 145px;
	margin-bottom: 18px;
}

.cText img
{
	height: 140px;
}

.cMute
{

	margin-top: 15px;
	margin-left: 17px;
	width: 64px;
	border: none;
	height: 18px;
	background-color: #e7e7e7;
	

}

#idMute
{
	/*bottom: 0;*/

	border-style: none;
	border: 1px solid gray;
}

.footer a
{
	text-decoration: none;
}

.bMaster
{

	width: 60px;
	border: 1px solid gray;
	height: 20px;
	background-color: #e7e7e7;
	font-family: Tahoma;
	font-size: 13px;
	text-align: center;
	margin-top: 15px;
	margin-left: 19px;
	padding-top: 3px;
}

.footer
{
	text-align: center;
}

.donatewrap
{

	display: flex;
	margin-top: 10px;
	margin-left: 573px;
	text-align: center;

}

.donatewrap img
{

	margin-left: 5px;
}

#skydress
{

	margin: 10px;
}

#ethdress
{

	margin: 10px;
}

#btcdress
{

	margin: 10px;
}

#mdldress
{

	margin: 10px;
}